<script setup lang="ts">

import {
  countdownText,
  customColorMethod,
  flagForm,
  getTopic, isBegin, isShowTopic,
  percentage, submitFlag,
  topic_ip,
} from "@/static/CTF_topic/CTF_web";
import {refreshPage} from "@/static/Homepage/Personal_data";
import {RefreshRight} from "@element-plus/icons-vue";
import {computed, onBeforeMount, ref} from "vue";
import {fetchWebInformation} from "@/static/utils/fetch_ctf_web_info";
import {useUserStore} from "@/stores/userStore";

// 在新标签页打开WP
function goToWp(item) {
  const url = `/WriteUp/web/${item.title}`;
  // 使用 window.open 在新标签页中打开链接
  window.open(url, '_blank');
}

// ========================== 获取题库信息 ===========================
const ctfWebData = ref([]);

onBeforeMount(async () => {
  await fetchWebInformation();
  const userStore = useUserStore();
  ctfWebData.value = userStore.ctfWebData;
});

// 创建一个计算属性来按 level 分组
const groupedDataByLevel = computed(() => {
  const groups = {};
  if (ctfWebData.value && Array.isArray(ctfWebData.value)) {
    ctfWebData.value.forEach((item) => {
      const level = item.level.toString();
      if (!groups[level]) {
        groups[level] = [];
      }
      groups[level].push(item);
    });
  }
  return groups;
});

</script>

<template>
  <div class="web-tips">
    <p>Tips：如果数据未及时更新，请刷新页面</p>
    <el-icon @click="refreshPage"><RefreshRight /></el-icon>
  </div>

  <div class="web-primary"
       v-for="(items, level) in groupedDataByLevel"
       :key="level" >
    <span v-if="level == '0'">初阶</span>
    <span v-else-if="level == '1'">中阶</span>
    <span v-else-if="level == '2'">高阶</span>
    <div class="web-row"></div>
    <div class="web-primary-topic">

      <div v-for="item in items"
           :key="item.title"
           class="web-primary-topic-item"
           @click="isShowTopic[item.title] = true">
        <img v-if="item.status.is_completed" alt="" src="@/assets/pass.png" class="web-primary-topic-item-pass" />
        <p>{{ item.title }}</p>
        <span v-if="!item.status.is_completed">- 待挑战 -</span>
        <span v-else-if="item.status.is_completed"
              style="color: #ed3d3d; font-weight: bold">- 攻克成功 -</span>

        <!-- 题目弹框 -->
        <el-dialog
            v-model="isShowTopic[item.title]"
            width="800"
            align-center
            :style="{ backgroundColor: '#282828' }">
          <template #header>
            <div style="color: #fff;
                        font-size: 20px;
                        letter-spacing: 2px;
                        font-weight: bold;
                        font-family: 'Alibaba Health Font 2.0 CN',sans-serif;">{{ item.title }}</div>
            <div class="web-row"
                 style="margin-top: 4px;
                        border:1px solid rgba(221,221,221,0.3);
                        width: 40%"></div>
          </template>

          <div class="topic-state">
            <div style="display: flex; flex-direction: row;">所需点数：<span>30</span></div>
            <div style="display: flex; flex-direction: row;">题目状态：
              <span v-if="!item.status.is_completed">待挑战</span>
              <span v-else-if="item.status.is_completed"
                    style="color: red;
                    font-weight: bold; font-size: 20px">已攻克
              </span>
            </div>
            <div style="display: flex; flex-direction: row;">
              解题奖励：点数<span>+{{ item.points }}</span> 经验<span>+{{ item.exp }}</span>
            </div>
          </div>

          <div class="topic-desc">{{ item.description }}</div>

          <a class="topic-ip" v-show="isBegin[item.title]">环境地址：{{ topic_ip }}</a>

          <div class="topic-button">
            <el-button type="success"
                       style="width: 10%;"
                       size="large"
                       v-if ="!isBegin[item.title]"
                       @click="getTopic(item.title, 'start');">
              开启挑战
            </el-button>

            <el-button type="danger"
                       style="width: 10%;"
                       size="large"
                       v-else-if="isBegin[item.title]"
                       @click="getTopic(item.title, 'stop')">
              销毁环境
            </el-button>
          </div>


          <div>剩余时间：{{ countdownText }}</div>

          <div class="topic-progress">
            <el-progress
                :text-inside="true"
                :stroke-width="26"
                :color="customColorMethod"
                striped
                striped-flow
                :duration="25"
                :percentage="percentage" />
          </div>


          <el-form-item>
            <span>Flag：</span>
            <el-input v-model="flagForm.flag"
                      style="width: 500px;"
                      class="custom-color-input"
                      size="large"
                      :disabled="!isBegin[item.title]"
                      placeholder="Flag{…… ……}"
                      clearable
            />
            <el-button type="primary"
                       size="large"
                       circle
                       text
                       :disabled="!isBegin[item.title]"
                       style="margin-left: 30px; font-size: 18px;"
                       @click="submitFlag(item.title)">
              提交flag
            </el-button>

            <el-button type="primary"
                       size="large"
                       circle
                       text
                       style="margin-left: 50px; font-size: 18px;"
                       @click="goToWp(item)"
                       :disabled="isBegin[item.title]">
              WriteUp
            </el-button>
          </el-form-item>


        </el-dialog>

      </div>
    </div>
  </div>

<!--  <div class="web-middle">-->
<!--    <span>中阶</span>-->
<!--    <div class="web-row" style="width: 15%"></div>-->
<!--  </div>-->

<!--  <div class="web-high">-->
<!--    <span>高阶</span>-->
<!--    <div class="web-row" style="width: 20%"></div>-->
<!--  </div>-->


</template>

<style scoped>

.web-tips {
  //position: absolute;
  display: flex;
  cursor: default;
  justify-content: right;
}

.web-tips i {
  margin: 2px 4px;
  cursor: pointer;
}

.custom-color-input :deep(.el-input__inner) {
  color: #ffffff;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 1px
}

.web-primary {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
  flex-direction: column;
}

.web-primary span, .web-middle span, .web-high span {
  display: flex;
  color: #87e9ff;
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 2px;
  user-select: none;
}

.web-row {
  display: flex;
  width: 10%;
  margin-top: 10px;
  height: 0;
  border: 1px solid #0EFAA7FF;
}

.web-primary-topic {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 创建四列，每列占据等分的空间 */
  gap: 40px; /* 设置元素之间的间隙 */
  width: 100%;
  height: 100%;
  margin-top: 40px;
}

.web-primary-topic-item {
  position: relative;
  height: 100px;
  border-radius: 20px;
  border: 3px solid #baffea;
  cursor: pointer;
  /* flex: 1 1 10%; 不再需要 flex 属性 */
  flex-direction: column;
  /* margin: 40px; 不再需要 margin，因为间隙通过 grid 的 gap 属性控制 */
}

.web-primary-topic-item-pass {
  width: 40px;
  height: 40px;
  position: absolute; /* 子级设置绝对定位 */
  bottom: 0; /* 距离顶部0 */
  right: 5px; /* 距离右边0 */
}

.web-primary-topic-item p {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 15px 0 15px 0;
  font-size: 20px;
  color: #88e2c9;
  font-weight: bold;
  user-select: none;
}

.web-primary-topic-item span{
  display: flex;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  justify-content: center;
  user-select: none;
}

.web-primary-topic-item:hover {
  border: 3px solid #fcb69f;
}


.topic-desc {
  display: flex;
  justify-content: center;
  color: #9a9a9a;
  font-size: 18px;
  user-select: none;
  margin: 30px 0;
}

.topic-state {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* 子元素水平均匀分布 */
  font-size: 18px;
}

.topic-state span {
  color: #00effb;
  margin: 0 5px;
}

.topic-static span {
  display: flex;
  color: red;
  font-size: 20px;
}

.topic-button {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 50px;
}

.topic-progress {
  height: 50px;
  margin-bottom: 20px;
}

.topic-ip {
  display: flex;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 20px;
}

</style>